<template>
	<view class="w-full h-full" ref="canvasBox">
		<canvas class="bg-black" style="width: 750rpx; height: 1000px;" canvas-id="firstCanvas" @touchstart="handleTap"
			id="firstCanvas"></canvas>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onReady
	} from "@dcloudio/uni-app"
	const canvasW = ref(750);
	const windowInfo = uni.getWindowInfo()
	const canvasH = ref(windowInfo.windowHeight);
	const Uconfig = {
		x: 210,
		y: 180,
		w: 320,
		h: 200,
	};
	const imageConfig = {
		w: 81,
		h: 45,
	};
	const totalImages = 78;
	const imagePath = '/static/tarotCard/card_back.png'
	const imageList = ref([]);
	let ctx = null;
	// 加载图片
	const loadImages = () => {
		imageList.value = new Array(totalImages).fill({
			file: imagePath,
			x: 0,
			y: 0,
			w: imageConfig.w,
			h: imageConfig.h,
			angle: 0,
			scale: 1,
		});
		drawUPath();
	};
	// 绘制U型路径上的图片
	const drawUPath = () => {
		// 计算每张图片在路径上的位置
		ctx.clearRect(0, 0, canvasW.value, canvasH.value);
		imageList.value = imageList.value.map((a, i) => {
			const point = getUPathPoint(i / totalImages);
			a = {
				index: i,
				...a,
				...point,
			};
			// 保存当前状态
			ctx.save();
			// ctx.scale(a.scale, a.scale);
			if (a.scale != 1) {
				ctx.translate((Uconfig.w / 2) + imageConfig.w, Uconfig.h / 2);
				ctx.rotate(-90);
			} else {
				ctx.translate(point.x, point.y);
				ctx.rotate(a.angle);
			}
			// 旋转图片（使图片始终朝向路径方向）
			// 绘制图片（注意旋转后坐标系的改变）
			ctx.drawImage('/static/tarotCard/card_back.png', -a.w / 2, -a.h / 2, a.w, a.h);
			// 恢复状态
			ctx.restore();
			return a
		});
		ctx.draw()
	};

	const getUPathPoint = (t) => {
		const halfWidth = Uconfig.w / 2;
		const radius = halfWidth;
		// 计算半圆周长
		const semicircleLength = Math.PI * radius;
		// 直线部分长度（两侧相等）
		const straightLength = Uconfig.h;
		// 总路径长度
		const totalLength = 2 * straightLength + semicircleLength;

		// 计算各部分所占比例
		const straightRatio = straightLength / totalLength - 0.01;
		const semicircleRatio = semicircleLength / totalLength;
		if (t < straightRatio) {
			// 左边直线（从上到下）
			const lineT = t / straightRatio;
			return {
				x: Uconfig.x - halfWidth,
				y: Uconfig.y - Uconfig.h / 2 + lineT * Uconfig.h,
				angle: 0, // 90度，朝下
			};
		} else if (t < straightRatio + semicircleRatio) {
			// 底部半圆（从左到右）
			const semicircleT = (t - straightRatio) / semicircleRatio;
			const angle = Math.PI - semicircleT * Math.PI; // 从180度到360度
			const val = {
				x: Uconfig.x + Math.cos(angle) * radius,
				y: Uconfig.y + Uconfig.h / 2 + Math.sin(angle) * radius,
				angle: angle + Math.PI, // 切线角度
			};
			return val;
		} else {
			// 右边直线（从下到上）
			const lineT = (t - straightRatio - semicircleRatio) / straightRatio;
			return {
				x: Uconfig.x + halfWidth,
				y: Uconfig.y + Uconfig.h / 2 - lineT * Uconfig.h,
				angle: 0, // -90度，朝上
			};
		}
	};
	// 监听点击事件
	let drawType = false
	const handleTap = (e) => {
		drawType = false
		// 获取触摸点信息
		const touch = e.touches[0]; // 获取第一个触摸点
		const touchX = touch.x;
		const touchY = touch.y;
		// 倒序遍历检测点击（从顶层到底层）
		imageList.value = imageList.value.map(a => {
			return {
				...a,
				scale: 1
			}
		})
		for (let i = totalImages - 1; i >= 0; i--) {
			const img = imageList.value[i];
			const scaledWidth = img.w * img.scale;
			const scaledHeight = img.h * img.scale;

			// 检测点击是否在图片区域内
			if (
				touchX >= img.x && touchX <= img.x + scaledWidth &&
				touchY >= img.y && touchY <= img.y + scaledHeight
			) {
				imageList.value[i].scale = 1.5;
				break; // 只响应最顶层的图片
			}
		}
		drawUPath()
	};

	// 初始化
	const initCanvas = () => {
		ctx = uni.createCanvasContext('firstCanvas')
		loadImages();
	};
	onReady(() => {
		initCanvas();
	});
</script>